<template>
  <div>
    <!-- 主要页面最大的 -->
    <div class="pa">
      <!-- 头像和信息 -->
      <div class="up-demo">
        <div id="avatar">
          <!-- <div class="demo-image"> -->
          <el-image
            style="width: 125px; height: 125px; border-radius: 7px"
            :src="url"
            @mouseenter="imgModify()"
          ></el-image>
          <div class="uploadimg" ref="uploadimg" @mouseout="showImg()">
            <el-upload
              class="avatar-uploader"
              action=""
              accept="image/png,image/gif,image/jpg,image/jpeg"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
              :on-change="imgChange"
            >
              <i class="el-icon-camera avatar-uploader-icon">
                <p class="avatar-p">修改头像</p>
              </i>
            </el-upload>
          </div>
          <div class="tan">
            <el-dialog
              title="修改头像"
              :visible.sync="dialogVisible"
              width="30%"
              :before-close="handleClose"
            >
              <el-image
                style="width: 125px; height: 125px; border-radius: 7px"
                :src="imageUrl"
              ></el-image>
              <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="uploadImg()">确 定</el-button>
              </span>
            </el-dialog>
          </div>
        </div>
        <div id="info">
          <div>
            <div class="info-username">{{ name }}
              <span class="user_describe">{{userInfo.user_describe!=null?userInfo.user_describe:''}}</span>
            </div>
            <div class="details">
              <div class="details-one">
                <span class="detailsname">性别</span>
                <span class="detailscontent" style="width: 200px;">{{userInfo.sex}}</span>
                <span v-if="userInfo.birth" class="detailsname">出生日期</span>
                <span v-if="userInfo.birth" class="detailscontent" style="width: 200px;">{{userInfo.birth}}</span>
              </div>
              <div class="details-two">
                <span v-if="userInfo.education" class="detailsname">教育背景</span>
                <span v-if="userInfo.education" class="detailscontent">{{userInfo.education}}</span>
              </div>
              <div class="details-san">
                <span v-if="userInfo.resident" class="detailsname">居住地</span>
                <span v-if="userInfo.resident" class="detailscontent">{{userInfo.resident}}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- <div id="updateinfo">
          
        </div> -->
        <el-button
            class="edit-details"
            size="small"
            type="primary"
            plain
            @click="$router.push('/updatedetails')"
            >编辑个人资料</el-button>
      </div>

      <!-- 详细内容 -->
      <div class="two">
        <person-home></person-home>
      </div>
    </div>
  </div>
</template>

<script>
import { updateimage } from "../../api/user";
import { finduserinfo } from '../../api/userinfo'
import PersonHome from "./PersonHome.vue";
export default {
  name: "PersonPage",
  components: {
    PersonHome,
  },
  data: function () {
    return {
      url: "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3225163326,3627210682&fm=26&gp=0.jpg",
      name: "",
      imageUrl: "",
      img: "",
      dialogVisible: false,
      userInfo: {},
    };
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      vm.getdata()
    });
  },
  methods: {
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      // const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      // return isJPG && isLt2M;
      return isLt2M;
    },
    imgModify() {
      this.$refs.uploadimg.style.display = "block";
    },
    showImg() {
      this.$refs.uploadimg.style.display = "none";
    },
    uploadImg() {
      console.log("上传头像");
      console.log(localStorage.getItem("mailbox"));
      console.log(this.img);
      var formData1 = new FormData();
      formData1.append("mailbox", localStorage.getItem("mailbox"));
      formData1.append("multipartFile", this.img);

      updateimage(formData1).then((res) => {
        console.log(res);
        this.dialogVisible = false;
        this.url = res.data.image;
        localStorage.setItem("image", res.data.image);
      });
    },
    // 图片改变时触发
    imgChange(files, fileList) {
      console.log("改变时触发");
      // console.log(files);
      // console.log(files.name);
      this.img = files.raw;
      this.dialogVisible = true;
      this.imageUrl = URL.createObjectURL(files.raw);
      console.log(this.imageUrl);
      // this.imgfilename = files.name;
    },

    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    getimage() {
      this.url = localStorage.getItem("image");
      this.name = localStorage.getItem("name");
    },
    // 获取个人详情
    getdata(){
      finduserinfo({
        uid:localStorage.getItem("uid")
      }).then((res)=>{
        console.log(res);
        if(res.code==200){
          this.userInfo=res.data
        }
      })
    },
  },
  created() {
    this.getimage();
  },
};
</script>

<style scoped>
.pa {
  /* height: 800px; */
  width: 70%;
  margin: 0 auto;
  /* border: solid 2px red; */
}
.up-demo {
  /* height: 150px; */
  /* border: solid 2px red; */
  background: #ffffff;
  border-bottom: solid 10px #f6f6f6;
  position: relative;
  display: flex;
  flex-direction: row;
}
#avatar {
  flex: 1;
  padding: 80px 10px 15px 25px;
  /* border: 1px solid red; */
}
#info {
  flex: 6;
  padding: 105px 0px 10px 0px;
  /* border: 1px solid blue; */
}
/* 修改个人信息  ***********STSRT********* */
#updateinfo {
  flex: 2;
  position: relative;
  /* border: 1px solid yellow; */
}
.edit-details {
  position: absolute;
  bottom: 20px;
  right: 20px;
}
/* 修改个人信息  *********** END ********* */
.demo-image {
  position: relative;
}
.uploadimg {
  position: absolute;
  top: 81px;
  left: 25px;
  width: 125px;
  height: 125px;
  border-radius: 7px;
  background: rgba(0, 0, 0, 0.5);
  line-height: 80px;
  text-align: center;
  font-size: 18px;
  display: none;
}
.avatar-uploader .el-upload {
  display: none;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
/* 修改图标  i标签 */
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 125px;
  height: 70px;
  line-height: 70px;
  text-align: center;
}
/* 修改头像文字 */
.avatar-p {
  font-size: 20px;
}

.info-username {
  /* border: 1px solid red; */
  /* height: 100px; */
  color: black;
  font-size: 30px;
  font-weight: bold;
  /* margin-bottom: 30px; */
}
.user_describe{
  font-size: 15px;
  margin-left: 20px;
}
.details {
  padding: 10px 0px 0px 0px;
}
.detailsname {
  display: inline-block;
  width: 100px;
  color: #2f3542;
  font-size: 16px;
  font-weight: bold;
  line-height: 24px;
  text-align: left;
}
.detailscontent {
  display: inline-block;
  font-size: 14px;
  color: #747d8c;
}
.two {
  min-height: 450px;
  /* border: solid 2px red; */
}
</style>

